<template>
<div class="box1">
  <MyButton type="primary" size="medium" >tag0</MyButton>
  <MyButton type="danger" size="medium" >tag1</MyButton>
  <MyButton type="success" size="medium" >tag1
    <i class="iconfont icon-guanbi" ></i>
  </MyButton>
  <MyButton type="primary" size="medium" >tag4</MyButton>
</div>
<div class="box1-2"> 
  <div class="box2">
  <input type="text" placeholder="请输入内容" v-model="a"/>
  <MyButton type="primary" size="medium" @myClick="add(a)">添加</MyButton>
  </div>
  <div class="box2">
  <div v-for="item in list" :key="item.id">
    <MyButton type="primary" size="medium" >{{item.name}}
      <i class="iconfont icon-guanbi" @click="del(item.id)"  ></i>
    </MyButton>
  </div>
</div>

</div>


</template>

<script>
import  MyButton  from "../MyButton.vue";
export default {
  components: {
    MyButton
  },
  data() {
    return {
      list: [
        { id: 1, name: "a" },
        { id: 2, name: "b" },
        { id: 3, name: "c" },
      ],
      a:""
    };
  },
  methods: {
    add(a){
      this.list.push({id:this.list.length+1,name:a})
      this.a=""
    },
    del(id){
    this.list=this.list.filter(item=>item.id!=id)
  }
  },
  
  
};

</script>

<style scoped>

.box1{
  display: flex;
}

.box1-2{
  display:block;
  
}

.box2{
display: flex;
}
</style>